<template>
    <div class="bon-container">
        <div class="header">
            <h4>营销中心</h4>
        </div>
        <div class="bon-con">
            <div class="bon-con__title flex-box flex-box-display">
                <div class="flex-box">
                    <el-date-picker
                            v-model="bonusesDate"
                            type="daterange"
                            range-separator="——"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd">
                    </el-date-picker>
                    <el-select v-model="usersCategory" placeholder="领取资格" clearable>
                        <el-option v-for="option in usersList" :key="option.value"
                                   :label="option.text" :value="option.value">
                            {{ option.text }}
                        </el-option>
                    </el-select>
                    <el-select v-model="type" placeholder="所有状态"  clearable>
                        <el-option v-for="option in typeList" :key="option.value"
                                   :label="option.text" :value="option.value">
                            {{ option.text }}
                        </el-option>
                    </el-select>
                    <el-input v-model="bonusesName" placeholder="优惠券名称"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="getBonusesList"></el-button>
                </div>
                <el-button type="primary" @click="addItem">添加优惠券</el-button>
            </div>
            <el-table :data="bonusesList" v-loading="tableLoading" style="width: 100%">
                <el-table-column :resizable="false" label="名称">
                    <template slot-scope="scope">
                        <span>{{scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column :resizable="false" label="面额/门槛" min-width="90">
                    <template slot-scope="scope">
                        <span>¥&nbsp;{{scope.row.money}}&nbsp;/&nbsp;¥&nbsp;{{scope.row.min_amount}}</span>
                    </template>
                </el-table-column>
                <el-table-column :resizable="false" label="有效期">
                    <template slot-scope="scope">
                        <span>{{scope.row.use_start_date}}至{{scope.row.use_end_date}}</span>
                    </template>
                </el-table-column>
                <el-table-column :resizable="false" label="限领/人" min-width="70">
                    <template slot-scope="scope">
                        <span>{{scope.row.limit_number}}</span>
                    </template>
                </el-table-column>
                <el-table-column :resizable="false" label="使用量/领取量/发行量" min-width="160">
                    <template slot-scope="scope">
                        <span>{{scope.row.used_number}}/{{scope.row.distribute_number}}/{{scope.row.publish_number}}</span>
                    </template>
                </el-table-column>
                <el-table-column :resizable="false" label="领取资格">
                    <template slot-scope="scope">
                        <span v-if="scope.row.get_qualification === 1">所有用户</span>
                        <span v-else>新用户</span>
                    </template>
                </el-table-column>
                <el-table-column :resizable="false" label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.use_status === 1">发放中</span>
                        <span v-else class="text-danger">已结束</span>
                    </template>
                </el-table-column>
                <el-table-column :resizable="false" label="操作" width="145">
                    <template slot-scope="scope">
                        <el-button @click="showItem(scope.$index,scope.row.id)"
                                   type="primary" size="mini" v-if="scope.row.use_status === 0">查看
                        </el-button>
                        <el-button @click="deleteItem(scope.$index, scope.row.id)" type="danger" plain size="mini"
                                   v-if="scope.row.use_status === 0">
                            删除
                        </el-button>
                        <el-button @click="editItem(scope.$index,scope.row.id)"
                                   type="primary" size="mini" v-if="scope.row.use_status === 1">编辑
                        </el-button>
                        <el-button @click="finishItem(scope.row.id)"
                                   type="primary" plain size="mini" v-if="scope.row.use_status === 1">结束
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination" v-if="page.total">
                <div>
                    共{{page.count}}页，每页{{pageSize}}条
                </div>
                <el-pagination layout="prev, pager, next" :total="page.total" :pageSize="pageSize"
                               @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>

    export default {
        data() {
            return {
                bonusesDate: [],
                usersCategory: '',
                usersList: [{value: '1', text: '所有用户'}, {value: '2', text: '新用户'}],
                type: '',
                typeList: [{value: '1', text: '发放中'}, {value: '0', text: '已结束'}],
                bonusesName: '',

                bonusesList: [],
                tableLoading: true,
                page: {
                    total: null,
                    count: null
                },
                pageSize: 20
            }
        },
        watch: {},
        computed: {},
        mounted() {
            this.getBonusesList();
        },
        methods: {
            genItem(data) {
                axios
                    .get('admin_bonus_categories', {
                        params: data
                    })
                    .then(res => {
                        this.page.total = res.data.count;
                        this.page.count = Math.ceil(res.data.count / this.pageSize)
                        return res;
                    })
                    .then(res => res.data.data)
                    .then(res => {
                        console.log('数据', res);
                        this.bonusesList = res;
                        this.bonusesList ? this.bonusesList.forEach(item => {
                            item.use_start_date = item.use_start_date ? item.use_start_date.slice(0,10) :''
                            item.use_end_date = item.use_end_date ? item.use_end_date.slice(0,10) :''
                        }) : [];
                        this.tableLoading = false
                    })
            },
            getBonusesList(pagination=1) {
                console.log('时间',this.bonusesDate)
                const data = {
                    pagination,
                    pageSize: this.pageSize,
                    use_start_date: this.bonusesDate ? this.bonusesDate[0] : '',
                    use_end_date: this.bonusesDate ? this.bonusesDate[1] : '',
                    name: ['like', `%${this.bonusesName}%`],
                    use_status: this.type,
                    get_qualification: this.usersCategory
                };
                console.log('搜索',data)
                this.genItem(data);
            },
            deleteItem(index, id) {
                this.$confirm('确认删除该优惠券?', '删除确认', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                })
                    .then(() => {
                        return axios
                            .post(`admin_bonus_categories/${id}`, {_method: 'DELETE'})
                            .then(
                                res => (res.data.status === 1 ? Promise.resolve() : Promise.reject(res.data.msg))
                            );
                    })
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                        this.getBonusesList();
                    })
                    .catch(err => {
                        if (err !== 'cancel') {
                            this.$message.error(err);
                        }else{
                            this.$message.error('取消');
                        }

                    });
            },
            finishItem(id) {
                console.log(id);
                this.$confirm('点击"结束"后，优惠券将不再被继续使用，但并不影响已领取的优惠券的使用，确认进行该操作?', '结束确认', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                })
                    .then(() => {
                        return axios
                            .post(`admin_bonus_categories/${id}`, {use_status: 0, _method: 'PUT'})
                            .then(
                                res => (res.data.status === 1 ? Promise.resolve() : Promise.reject(res.data.msg))
                            );
                    })
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                        this.getBonusesList();
                    })
                    .catch(err => {
                        if (err == 'cancel') {
                            this.$message.error('取消');
                        }
                    });
            },
            editItem(index, id) {
                this.$router.push({name: 'BonusesEdit', query: {id: id, edit: true}});
            },
            showItem(index, id) {
                this.$router.push({name: 'BonusesEdit', query: {id: id, edit: false}});
            },
            addItem() {
                this.$router.push({name: 'BonusesAdd', params: {}});
            },
            handleCurrentChange(current) {
                this.getBonusesList(current);
            }
        }
    }
</script>
<style scoped>
    .bon-container {
        min-height: calc(100vh - 92px);
    }

    .flex-box {
        display: flex;
    }

    .flex-box-display {
        justify-content: space-between;
    }

    .header {
        padding: 10px;
        background: #FFFFFF;
    }

    .bon-con {
        min-height: calc(100vh - 92px);
        margin: 10px;
        padding: 20px;
        background: #FFFFFF;
    }

    .bon-con__title {
        padding: 0 20px 20px 0;
        border-bottom: 1px dashed #D8D8D8;
    }

    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
    }

    .text-danger {
        color: #DF2329 !important;
    }
</style>
<style>
    .el-date-picker {
        width: 226px;
    }

    .el-input {
        width: 160px;
        margin-left: 20px;
    }

    .el-message-box {
        width: 569px;
    }

    .el-message-box__header {
        text-align: center;
        background: #3F7DFF;
    }

    .el-message-box__title {
        font-size: 14px;
        color: #FFFFFF;
    }

    .el-message-box__content {
        font-size: 12px;
    }

    .el-icon-close {
        display: none;
    }
</style>